<template>
  <div class="LoginView">
    <div class="loginMain">
      <div class="loginImg">
        <van-image round width="10rem" height="10rem" src="./images/loginImg.png"/>
      </div>
      <h2>核桃仁</h2>
      <van-form @submit="onSubmit">
        <van-field
            v-model="phone"
            type="text"
            name="用户名"
            label="手机号"
            placeholder="请输入手机号码"
            :rules="[{ required: true}]"/>
        <van-field
            v-model="pwd"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true}]"/>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <div class="register-password">
        <span @click="registerBtn">立即注册</span>
        <span>忘记密码?</span>
      </div>
    </div>
    <div>
      <van-divider
          :style="{ color: 'black', borderColor: 'black', padding: '0 16px' }">
        第三方登录
      </van-divider>
      <div class="otherLogin">
        <span class="iconfont icon-weixin weixin" @click="weiXinBtn"></span>
      </div>
    </div>
  </div>

</template>

<script>
import {Toast} from "vant";
import {mapActions, mapGetters} from 'vuex'

export default {
  name: "LoginView",
  data() {
    return {
      phone: '',
      pwd: ''
    }
  },
  mounted() {
  },
  methods: {
    ...mapActions(['loginSuccess', 'setIsBindDoctor']),
    registerBtn() {//注册
      this.$router.push('/register')
    },

    onSubmit() {//登录
      this.$service.loginService.userLogin(this.phone, this.pwd).then(res => {
        if (res.data.code == 200) {
          console.log('登录信息返回=' + JSON.stringify(res.data.data[0]));
          this.loginSuccess(res.data.data[0]);
          Toast.success('登录成功');
          this.$router.push('/frontPage');
        } else {
          Toast.fail('账号或密码输入错误');
        }
      }).catch(err => {
        console.log('登录失败', err)
      })
    },
    weiXinBtn() {
      this.$dialog.alert({
        title: '第三方登录',
        message: '该功能暂未开放',
      }).then(() => {
        // on close
      });
    }
  }
}
</script>

<style scoped lang="less">
.LoginView {
  //margin: 10% auto;
  margin-top: 10%;

  .loginMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loginImg {
      margin-bottom: 1rem;
    }

    .register-password {
      display: flex;
      width: 80%;
      justify-content: space-between;
    }
  }
}

//第三方登录
.otherLogin {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weixin {
  color: #22D76E;
  font-size: 40px;
}
</style>
